<template>
    <div id="content">
        <div class="sidebar">
            <span style="font-size: 50px;">price</span><br>
            <span class="sidebar_elem" @click.stop="change_activate_sidebar_list('list')" :class="{unit_active:activate_sidebar_list.list.list}">[list]</span>
            <span class="sidebar_elem" @click.stop="change_activate_sidebar_list('chart')" :class="{unit_active:activate_sidebar_list.list.chart}">[chart]</span>
            <span class="sidebar_elem" @click.stop="change_activate_sidebar_list('new')" :class="{unit_active:activate_sidebar_list.list.new}">[new]</span>
        </div>
        <div id="price_content" class="sidebar">
            <List v-if="activate_sidebar_list.list.list" />
            <Chart v-if="activate_sidebar_list.list.chart"/>
            <New v-if="activate_sidebar_list.list.new"/>
        </div>
    </div>
</template>
<script>
import List from './price/List.vue'
import Chart from './price/Chart.vue'
import New from './price/New.vue'
export default{
    components:{
        List,Chart,New
    },
    data(){
        return {
            activate_sidebar_list:{
                list:{
                    'list':true,
                    'chart':false,
                    'new':false
                },
                now:"list"
            }
        }
    },
    methods:{
        change_activate_sidebar_list(arg){
            if(this.activate_sidebar_list.now != null){
                this.activate_sidebar_list.list[this.activate_sidebar_list.now] = false
            }
            this.activate_sidebar_list.now = arg
            this.activate_sidebar_list.list[arg] = true
        }
    }
}

</script>
<style scoped>
.sidebar_elem{
    margin-left: 50px;
    margin-right: 50px;
    font-size: 30px;
}
.sidebar{
    border-style: solid;
    border-color: black;
}
#price_content{
    border-style: solid;
    border-color: rebeccapurple;
    height: 716px;
}
</style>